<header class="ui-c-f">
    {{if list}}
    {{each tabs as tab index}}
    <div {{if tab.status== select+ '' }}class="select"{{/if}} i-tap="changeTab({{tab.status}})">{{tab.title}}</div>
    {{/each}}
    {{/if}}
</header>
<div class="header-holder"></div>

{{if list && list.length>0}}
{{each list as order}}
<div class="ui-box" i-tap="goto(#/orderDetail/{{order._id}})">
    <div class="ui-bar order-id">
        <span>订单号</span>
        <b>{{order._id.substr(order._id.length-10,10)}}</b>


        <span style="float: right;">{{formatDate(order.created,'yyyy-M-d hh:mm')}}</span>
    </div>
    {{if order.status != '0'}}
    {{each order.children}}
    <div class="child-order">
        <div class="bar-status child-order-status">
            <div style="display: inline;font-size: 12px"><span style="color: #888">商家</span><span
                    style="margin-left:10px;color: #111">{{$value.supplier.name}}</span></div>
            <div class="ui-c-f frame-status">
                <span class="label-status">{{getStatusStr($value.status)}}</span>
            </div>
        </div>
        <div class="supplier-product-list">
            {{each $value.skus}}
            <div class="product">

                <img src="{{$value.pic}}?imageView2/2/w/200">

                <div class="tumb-top ui-c-f">
                    <div class="thum-price">
                        <div class="ui-price price-red">{{$value.price/10}}</div>
                        {{if $value.price_cost}}
                        <div class="ui-price price-gray">{{$value.price_cost/10}}</div>
                        {{/if}}
                    </div>
                    <h1>
                        {{$value.title}}
                    </h1>
                </div>
                <div class="quantity">{{$value.quantity}}</div>
            </div>
            {{/each}}
        </div>
    </div>
    {{/each}}
    {{else}}
    <!-- 状态==0时使用 -->
    <div class="product-list">
        {{each order.skus}}
        <div class="product">
            <img src="{{$value.pic}}?imageView2/2/w/200">

            <div class="tumb-top ui-c-f">
                <div class="thum-price">
                    <div class="ui-price price-red">{{$value.price/10}}</div>
                    {{if $value.price_cost}}
                    <div class="ui-price price-gray">{{$value.price_cost/10}}</div>
                    {{/if}}
                </div>
                <h1>
                    {{$value.title}}
                </h1>
            </div>
            <div class="quantity">{{$value.quantity}}</div>
        </div>
        {{/each}}
    </div>
    {{/if}}

    <div class="ui-bar bar-status order-status">
        <div class="amout">
            <b>合计</b>
            <span class="ui-price">{{order.needPay/10}}</span>
        </div>

        {{if order.status == 0}}
        <div class="ui-c-f frame-status" data-status="{{order.status}}">
            {{if !order.cancel}}
            <button class="btn-cancel"><span>取消</span>
            </button>
            <button class="ui-btn-yellow btn-pay" i-dom="fbutton" i-tap="clickfb"><span>付款</span>
            </button>
            {{else}}
            <button class="label-canceled" style="color: #888"><span>{{if order.cancel==4}}支付超时{{else}}已取消{{/if}}</span>
            </button>
            {{/if}}
        </div>
        {{/if}}
    </div>
</div>
{{/each}}
{{else}}
没有订单,找设计师设计
{{/if}}

<div class="ui-page-holder"></div>

<style>
    header {
        height: 36px;
        width: 100%;
        border-bottom: solid 1px #f0f0f0;
        background: white;
        position: fixed;
        z-index: 100;
    }

    .ui-btn-yellow.btn-pay {
        float: left;
        width: 70px;
        height: 26px;
        padding: 0;
        margin-top: 9px;
    }

    .frame-status {
        float: right;
        margin-right: 10px;
    }

    .label-status {
        font-size: 13px;
        color: #111;
    }

    .btn-cancel {
        float: left;
        color: #6f99d2;
        height: 44px;
        background-color: #fff;
        padding-right: 11px;
        margin-right: 10px;
        padding-left: 11px;
    }

    header > div {
        font-size: 14px;
        color: #888888;
        width: 25%;
        float: left;
        line-height: 36px;
        height: 36px;
        text-align: center;
    }

    header > div.select {
        color: #111111;
    }

    .header-holder {
        height: 36px;
    }

    .order-id {
        height: 36px;
        line-height: 36px;
    }

    .order-id > span {
        font-size: 12px;
        color: #888888;
    }

    .order-id > b {
        font-size: 12px;
        font-weight: lighter;
    }

    .supplier-product-list .product > img {
        margin-left: 0;
    }

    .child-order {
        padding-left: 15px;
        border-top: solid 1px #f0f0f0;
    }

    .child-order-status {
        height: 36px;
        line-height: 36px
    }

    .bar-status .amout {
        height: 100%;
        float: left;
        display: inline-block;
    }

    .bar-status .amout > b {
        font-size: 12px;
        font-weight: lighter;
    }

    .bar-status .amout > span {
        color: red;
        font-size: 15px;
    }

    .order-status {
        border-top: solid 1px #f0f0f0;
    }

    .product {
        width: 100%;
        height: 100px;
        padding: 8px 0;
        border-top: solid 1px #f0f0f0;
    }

    .product h1 {
        font-size: 13px;
        font-weight: lighter;
        width: 210px;
        margin-top: 8px;
        margin-left: 8px;
        float: left;
    }

    .product > img {
        margin-left: 8px;
        display: block;
        float: left;
        width: 100px;
        height: 100px;
    }

    .tumb-top {
        height: 70px;
    }

    .thum-price {
        position: relative;
        float: right;
        margin-right: 8px;
        margin-top: 8px;
        text-align: right;
    }

    .price-red {
        color: #ff0000;
        font-size: 14px;
        font-weight: normal;
    }

    .price-gray {
        color: #888888;
        text-decoration: line-through;
        font-size: 11px;
    }

    .quantity {
        color: #888888;
        float: right;
        margin-right: 8px;
        font-size: 12px;
    }

    .quantity::before {
        content: 'x';
        display: inline-block;
    }


</style>